<div class="layui-container fly-marginTop fly-user-main">
  {include file="common/menu"}

  <div class="site-tree-mobile layui-hide">
    <i class="layui-icon">&#xe602;</i>
  </div>
  <div class="site-mobile-shade"></div>

  <div class="site-tree-mobile layui-hide">
    <i class="layui-icon">&#xe602;</i>
  </div>
  <div class="site-mobile-shade"></div>


  <div class="fly-panel fly-panel-user" pad20>
    <div class="layui-tab layui-tab-brief" lay-filter="user">
      <ul class="layui-tab-title" id="LAY_mine">
        <li class="layui-this" lay-id="info">我的资料</li>
        <li lay-id="pass">密码</li>
        <li lay-id="avatar">头像</li>
        <li lay-id="bind">封面</li>
      </ul>
      <div class="layui-tab-content" style="padding: 20px 0;">

        <div class="layui-form layui-form-pane layui-tab-item layui-show">
          <form method="post">

            <!-- 隐藏域 -->
            <input type="text" name="action" style="display: none;" value="profile">

            <!-- 邮箱 -->
            <div class="layui-form-item">
              <label for="L_email" class="layui-form-label">邮箱</label>
              <div class="layui-input-inline">
                <input type="text" id="L_email" name="email" required lay-verify="email" autocomplete="off"
                  value="{$LoginUser['email']}" class="layui-input" disabled>
              </div>
              <!--  邮箱验证步骤：
                    第一步： 前端点击重新验证邮箱； 发送ajax请求并且传邮箱的参数过去，触发发送邮件的方法,home/user/email
                    第二步：后端user控制器下面的email方法，先是校验邮箱是否为空，组装发送邮件的信息，邮件信息里面有一个校验邮箱的方法home/index/email，触发公共函数send()邮箱发送方法，
                        （1）公共函数send()，第一个要引入第三方法插件phpmailer，
                        （2）设置端口，普通的25，服务器465，设置第三方服务，发送邮箱确认是否QQ邮箱，163箱
                        （3）设置发送件人的信息（发件人的地址，授权码，主题）
                    第三步：邮件发送成功之后，进入邮箱查看邮件，点击确认（’点击免费邮箱验证‘）;
                    第四步：home模块，index控制器，下面email()邮箱校验，获取邮箱参数
                    第五步：查询所有用户表下面的id,email字段，去做对比，找到唯一匹配邮箱
                    第六步：更新数据，验证信息auth改为已认证，提示前端告知邮箱验证成功
              -->
              {if condition="$LoginUser['auth'] == 0" }
              <div class="layui-form-mid layui-word-aux">如果您在邮箱已激活的情况下，变更了邮箱，需
                <a href="javascript:void(0);" style="font-size: 12px; color: #4f99cf;" id="auth">重新验证邮箱</a>。
              </div>
              {/if}
            </div>

            <!-- 昵称 -->
            <div class="layui-form-item">
              <label for="L_username" class="layui-form-label">昵称</label>
              <div class="layui-input-inline">
                <input type="text" id="L_username" name="nickname" required lay-verify="required" autocomplete="off"
                  value="{$LoginUser['nickname']}" class="layui-input">

              </div>
              <span id="nickname_txt" style="line-height: 38px;"></span>
            </div>

            <div class="layui-form-item">
              <label for="L_username" class="layui-form-label">性别</label>
              <div class="layui-inline">
                <div class="layui-input-inline" style="width: 300px;">
                  <input type="radio" name="sex" value="0" {$LoginUser['sex']=='0' ? 'checked' : '' } title="保密">
                  <input type="radio" name="sex" value="1" {$LoginUser['sex']=='1' ? 'checked' : '' } title="男">
                  <input type="radio" name="sex" value="2" {$LoginUser['sex']=='2' ? 'checked' : '' } title="女">
                </div>
              </div>
            </div>

            <!-- 城市 -->
            <div class="layui-form-item">
              <label for="L_city" class="layui-form-label">城市</label>
              <div class="layui-input-inline">
                <select name="province" id="province" lay-filter="province" lay-verify="required">
                  <option value="">请选择省</option>
                  {foreach $province as $item}
                  <option {$LoginUser.province==$item.code ? "selected" :""} value="{$item.code}">{$item.name}
                  </option>
                  {/foreach}
                </select>
              </div>
              <div class="layui-input-inline">
                <select name="city" id="city" lay-filter="city" lay-verify="required">
                  <option value="">请选择市</option>
                  {foreach $city as $item}
                  <option {$LoginUser.city==$item.code ? "selected" :""} value="{$item.code}">{$item.name}</option>
                  {/foreach}
                </select>
              </div>
              <div class="layui-input-inline">
                <select name="district" id="district" lay-filter="district" lay-verify="required">
                  <option value="">请选择区</option>
                  {foreach $district as $item}
                  <option {$LoginUser.district==$item.code ? "selected" :""} value="{$item.code}">{$item.name}
                  </option>
                  {/foreach}
                </select>
              </div>
            </div>


            <div class="layui-form-item layui-form-text">
              <label for="L_sign" class="layui-form-label">签名</label>
              <div class="layui-input-block">
                <textarea placeholder="随便写些什么刷下存在感" id="L_sign" name="content" autocomplete="off" class="layui-textarea"
                  style="height: 80px;">{$LoginUser['content']}</textarea>
              </div>
            </div>

            <div class="layui-form-item">
              <button class="layui-btn" id="profilebtn" key="set-mine" type="submit">确认修改</button>
            </div>
          </form>
        </div>

        <!-- 密码 -->
        <div class="layui-form layui-form-pane layui-tab-item">
          <form method="post">
            <!-- 隐藏域 -->
            <input type="text" name="action" style="display: none;" value="password">

            <div class="layui-form-item">
              <label for="L_nowpass" class="layui-form-label">当前密码</label>
              <div class="layui-input-inline">
                <input type="password" id="L_nowpass" name="nowpass" required lay-verify="required" autocomplete="off"
                  class="layui-input">
              </div>
              <span id="oldpass_txt" style="line-height: 38px;"></span>
            </div>
            <div class="layui-form-item">
              <label for="L_pass" class="layui-form-label">新密码</label>
              <div class="layui-input-inline">
                <input type="password" id="L_pass" name="pass" required lay-verify="required" autocomplete="off"
                  class="layui-input">
              </div>
              <span id="newpass_txt" style="line-height: 38px;"></span>
            </div>
            <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">确认密码</label>
              <div class="layui-input-inline">
                <input type="password" id="L_repass" name="repass" required lay-verify="required" autocomplete="off"
                  class="layui-input">
              </div>
              <span id="repass_txt" style="line-height: 38px;"></span>
            </div>
            <div class="layui-form-item">
              <button class="layui-btn" key="set-mine" id="passbtn" type="submit">确认修改</button>
            </div>
          </form>
        </div>

        <!-- 头像 -->
        <div class="layui-form layui-form-pane layui-tab-item">
          <form method="post" enctype="multipart/form-data">
            <!-- 隐藏域 -->
            <input type="text" name="action" style="display: none;" value="avatar">

            <div class="layui-form-item">
              <div class="avatar-add">
                <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB</p>
                <button type="button" class="layui-btn upload-img" onclick="avatar.click()">
                  <i class="layui-icon">&#xe67c;</i>上传头像
                </button>
                <input type="file" id="avatar" name="avatar" hidden>
                <img id="img" src="{$Think.cookie.LoginUser['avatar']}">
                <span class="loading"></span>
              </div>
            </div>

            <div class="layui-form-item" style="width: 373px;text-align: center;">
              <button class="layui-btn" type="submit">确认修改</button>
            </div>
          </form>

        </div>

        <!-- 封面 -->
        <div class="layui-form layui-form-pane layui-tab-item">
          <form method="post" enctype="multipart/form-data">

            <!-- 隐藏域 -->
            <input type="text" name="action" style="display: none;" value="cover">

            <div class="layui-form-item">
              <div class="avatar-add">
                <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB</p>
                <button type="button" class="layui-btn upload-img" onclick="cover.click()">
                  <i class="layui-icon">&#xe67c;</i>上传封面
                </button>
                <input type="file" id="cover" name="cover" hidden>
                <img style="border-radius: 0px;left: 26%;top: 50%;width: 343px;height: 205px;" id="coverimg"
                  src="{$Think.cookie.LoginUser['cover']}">
                <span class="loading"></span>
              </div>
            </div>
            <div class="layui-form-item" style="width: 373px;text-align: center;">
              <button class="layui-btn" type="submit">确认修改</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  // 预览图片
  function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
      url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
      url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
      url = window.webkitURL.createObjectURL(file);
    }
    return url;
  }

  layui.use(['layer', 'jquery', 'form'], function () {
    var layer = layui.layer
    var form = layui.form
    var $ = layui.jquery

    //给省份绑定事件
    form.on('select(province)', function (data) {
      var province = data.value
      console.log(data);
      //异步请求
      $.ajax({
        type: 'POST',
        url: `{:url('home/user/area')}`,
        data: `code=${province}`,
        dataType: 'json',
        success: function (data) {
          console.log(data)
          var output = '<option value="">请选择市</option>'
          for (var city of data) {
            output += `<option value="${city.code}">${city.name}</option>`
          }
          $("#city").html(output)
          $("#district").html(`<option value="">请选择县/区</option>`)
          //用layui的方式渲染一下select下拉框
          form.render('select')
        }
      })
    })

    //给市绑定事件
    form.on('select(city)', function (data) {
      var city = data.value
      $.ajax({
        type: 'POST',
        //异步请求
        url: `{:url('home/user/areadistrict')}`,
        data: `code=${city}`,
        dataType: 'json',
        success: function (data) {
          console.log(data)
          var output = '<option value="">请选择区</option>'
          for (var city of data) {
            output += `<option value="${city.code}">${city.name}</option>`
          }
          $("#district").html(output)
          //用layui的方式渲染一下select下拉框
          form.render('select')
        }
      })
    })

    // 验证邮箱操作
    $("#auth").on("click", function () {
      var email = $("#L_email").val();

      if (confirm("确定要发送邮箱！")) {
        $.ajax({
          type: "POST",
          url: `{:url('home/user/email')}`,
          data: {
            email: email,
          },
          success: function (data) {
            layer.msg(data.msg);
          }
        })
      }
    })

    // 检查昵称是否重复
    $("#L_username").on("change", function () {
      var username = $(this).val();

      $.ajax({
        type: "POST",
        url: `{:url('home/user/check')}`,
        data: {
          nickname: username,
          userid: `{$LoginUser.id}`,
        },
        success: function (data) {
          data = JSON.parse(data);
          if (data["result"]) {
            $("#nickname_txt").html(data["msg"]).css({
              color: "green",
            });
            $("#profilebtn").attr("disabled", false);
          } else {
            $("#nickname_txt").html(data["msg"]).css({
              color: "red",
            });
            $("#profilebtn").attr("disabled", true);
          }
        }
      })
    })

    // 检查密码是否正确
    $("#L_nowpass").on("change", function () {
      var oldpass = $(this).val();

      $.ajax({
        type: "POST",
        url: `{:url('home/user/check')}`,
        data: {
          oldpass: oldpass,
          userid: `{$LoginUser.id}`,
        },
        success: function (data) {
          data = JSON.parse(data);
          if (data["result"]) {
            $("#oldpass_txt").html(data["msg"]).css({
              color: "green",
            })
            $("#passbtn").attr("disabled", false);
          } else {
            $("#oldpass_txt").html(data["msg"]).css({
              color: "red",
            });
            $("#passbtn").attr("disabled", true);
          }
        }
      })
    })

    // 检查新密码是否正确
    $("#L_pass").on("change", function () {
      var newpass = $(this).val();

      $.ajax({
        type: "POST",
        url: `{:url('home/user/check')}`,
        data: {
          newpass: newpass,
          userid: `{$LoginUser.id}`,
        },
        success: function (data) {
          data = JSON.parse(data);
          if (data["result"]) {
            $("#newpass_txt").html(data["msg"]).css({
              color: "green",
            })
            $("#passbtn").attr("disabled", false);
          } else {
            $("#newpass_txt").html(data["msg"]).css({
              color: "red",
            });
            $("#passbtn").attr("disabled", true);
          }
        }
      })
    })

    // 检查新密码与确认密码是否一样
    $("#L_repass").on("change", function () {
      var repass = $(this).val();
      var newpass = $("#L_pass").val();

      if (repass == newpass) {
        $("#repass_txt").html("密码一致！继续操作！").css({
          color: "green",
        })
        $("#passbtn").attr("disabled", false);
      } else {
        $("#repass_txt").html("密码不一致！请重新输入！").css({
          color: "red",
        });
        $("#passbtn").attr("disabled", true);
      }
    })

    // 头像预览图
    $("#avatar").on("change", function () {

      // 获取当前文件路径
      var url = getObjectURL(this.files[0]);
      console.log(url);
      // 将路径放入img标签, 展示预览图
      if (url) {
        $("#img").attr('src', url);
      }

    })

    // 封面预览图
    $("#cover").on("change", function () {

      // 获取当前文件路径
      var url = getObjectURL(this.files[0]);
      console.log(url);
      // 将路径放入img标签, 展示预览图
      if (url) {
        $("#coverimg").attr('src', url);
      }

    })
  })


</script>